// 如何在 webpack 构建的项目中，使用 Vue 进行开发

// 复习 在普通网页中如何使用vue：
// 1. 使用 script 标签 ，引入 vue 的包
// 2. 在 index 页面中，创建 一个 id 为 app div 容器
// 3. 通过 new Vue 得到一个 vm 的实例

// import Vue from '../node_modules/vue/dist/vue'  // 导入vue.js
// import Vue from 'vue/dist/vue'  // 导入vue.js 得到Vue构造函数 通过注册组件 标签形式引用组件形式 渲染组件模版对象

// 在webpack 中尝试使用 Vue：
// 注意： 在 webpack 中， 使用 import Vue from 'vue' 导入的 Vue 构造函数，功能不完整，只提供了 runtime-only 的方式，并没有提供 像网页中那样的使用方式；
import Vue from 'vue'  // 导入的入口文件是dist/vue.runtime.common.js  也得到了一个Vue构造函数 必须通过render方法渲染导入的***.vue组件来覆盖el指定控制区域
// 和node中 require查找规则一样  最后通过vue包的package.json的main属性指定 发现导入的入口文件是功能不全的vue.runtime.common.js 不能像使用注册私有组件方式来渲染页面
// 只能通过render渲染
// 导致与在普通网页中script标签导入的vue.js相比 Vue构造函数功能不全 
// 解决方案：1.修改vue包的package.json的main属性指定入口文件 2.import相对路径  3.在webpack.config.js配置resolve对象节点 alias对象指定导入的入口文件

// import Vue from '../node_modules/vue/dist/vue.js'
// 回顾 包的查找规则：
// 1. 找 项目根目录中有没有 node_modules 的文件夹
// 2. 在 node_modules 中 根据包名，找对应的 vue 文件夹
// 3. 在 vue 文件夹中，找 一个叫做 package.json 的包配置文件
// 4. 在 package.json 文件中，查找 一个 main 属性【main属性指定了这个包在被加载时候，的入口文件】


// 在.vue文件中  template标签就是这里的template指定的组件控制区域 .vue文件中 script标签中 export default {}对象就是这里的除了template属性(被单独提取出来了)之外的组件模版对象
// var login = { // 这个组件模版对象可以注册为私有组件、全局组件、路由组件抽离成login.vue文件   
// 这里template属性指定控制区域对应login.vue的template标签区域  
// 剩余其他属性归类到script中默认导出对象中成员
//   template: '<h1>这是login组件，是使用网页中形式创建出来的组件</h1>',  // 相当于.vue文件中template标签 指定控制区域定义的模版字符串
//   data(){
//     return {}
//   },
//  methods: {}   // data相当于.vue文件中script标签 保存组件控制的区域方法
// }


// 1. 导入 login 组件
import login from './login.vue' // 得到一个组件模版对象 和自定义组件模版对象没区别

// 默认，webpack 无法打包 .vue 文件，需要安装 相关的loader： 
//  cnpm i vue-loader vue-template-compiler -D
//  在配置文件中，新增loader配置项 { test:/\.vue$/, use: 'vue-loader' }
// vue-template-compiler是vue-loader内部依赖的

var vm = new Vue({
  el: '#app',
  data: {
    msg: '123'
  },
  // components: {
  //   login
  // }
  /* render: function (createElements) { // 在 webpack 中，如果想要通过 vue， 把一个组件放到页面中去展示，vm 实例中的 render 函数可以实现
    return createElements(login)
  } */

  render: c => c(login) // 不写函数体的{} 默认会return
})


// 总结梳理： webpack 中如何使用 vue :
// 1. 安装vue的包：  cnpm i vue -S
// 2. 由于 在 webpack 中，推荐使用 .vue 这个组件模板文件定义组件，
// 所以，需要安装 能解析这种文件的 loader cnpm i vue-loader vue-template-complier -D
// 3. 在 main.js 中，导入 vue 模块  import Vue from 'vue'
// 4. 定义一个 .vue 结尾的组件，其中，组件有三部分组成： template script style
// 5. 使用 import login from './login.vue' 导入这个组件
// 6. 创建 vm 的实例 var vm = new Vue({ el: '#app', render: c => c(login) })
// 7. 在页面中创建一个 id 为 app 的 div 元素，作为我们 vm 实例要控制的区域；


import m222, { title as title123, content } from './test.js'
console.log(m222)
console.log(title123 + ' --- ' + content)